<html>
<head>
	<title>Wave Editor</title>
		<script src="utils.js" type="text/javascript"></script>
		<script src="rpc.js" type="text/javascript"></script>
		<script src="common.pbjson.js" type="text/javascript"></script>
		<script src="waveclient-rpc.pbjson.js" type="text/javascript"></script>
		<script src="webclient.pbjson.js" type="text/javascript"></script>
		<script src="jsot.js" type="text/javascript"></script>
		<script src="editor.js" type="text/javascript"></script>
		<script src="domiterator.js" type="text/javascript"></script>
	<style type="text/css">
body { font-family:aria,sans-serif; }
#login { position:absolute; top:0px; left:0px; }
#app { position:absolute; top:0px; left:0px;visibility:hidden;width:100% }
.jsot_caret { background-color:red; color:white; display:inline; font-size:9pt; position:relative; top:-2px }
	</style>	
</head>
<body>
	<div id="login">
		<form>
			<p>User JID: <input type="text" id="jid" value="tux" />@wave1.vs.uni-due.de</p>
			<p><input type="button" value="Login" onclick="login()" /></p>
			<p id="logintext"></p>
		</form>
	</div>
	<div id="app" style="visibility:hidden">
		<h1>Concurrent editor</h1>
		<div><input id="bold" type="button" value="Bold" > <input id="italic" type="button" value="Italic" ></div>
		<div id="editor" contentEditable="true" style="border:1px solid black; margin:3px"></div>
	</div>
	<script type="text/javascript">
	
var _isBold = false;
var _isItalic = false;

/**
 * Called when clicking on login
 */
function login()
{
	document.getElementById('logintext').innerHTML = "Logging in ... please wait";
	// Login at the wave server
	JSOT.Rpc.login( document.getElementById('jid').value + "@wave1.vs.uni-due.de", onLogin );
}

/**
 * Called when the server has logged us in
 */
function onLogin()
{
	document.getElementById( 'login' ).style.visibility = "hidden";
	document.getElementById( 'app' ).style.visibility = "visible";
	
	// Initialize the wave
	var wave = JSOT.Wave.getWave( "w+editor", "wave1.vs.uni-due.de" );
	var wavelet = wave.getWavelet( "conv+root", "wave1.vs.uni-due.de" );
	var mainDoc = wavelet.getDoc("conversation");

	// Connect the editor with the wavelet document
	var editor = new JSOT.Editor( mainDoc, document.getElementById("editor") );
	editor.onCursorChange = function() { cursorChange(editor); };
	document.getElementById( 'bold' ).onclick = function() { editor.setStyle( "style/fontWeight", _isBold ? null : "bold"); };
	document.getElementById( 'italic' ).onclick = function() { editor.setStyle( "style/fontStyle", _isItalic ? null : "italic"); };
	
	// Open the wave
	JSOT.Rpc.openWavelet( wavelet.url() );
}

function cursorChange(editor)
{
	if ( !editor.cursorFormat )
		return;
	var italic = editor.cursorFormat["style/fontStyle"] == "italic";
	var bold = editor.cursorFormat["style/fontWeight"] == "bold";
	if ( italic != _isItalic )
	{
		_isItalic = italic;
		document.getElementById('italic').value = _isItalic ? "No italic" : "Italic";
	}
	if ( bold != _isBold )
	{
		_isBold = bold;
		document.getElementById('bold').value = _isBold ? "No bold" : "Bold";
	}
}
	</script>
</body>	